import React, { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { SearchBar, Divider, List } from 'antd-mobile';

import { useAutoHandleTabbar } from '../hooks/useTabbar';

const CinemaContent = (props) => {
  const { list, name } = props;

  const navigate = useNavigate();
  const searchList = useMemo(
    () =>
      list.filter(
        (item) =>
          item.name.toLowerCase().includes(name.toLowerCase()) ||
          item.address.toLowerCase().includes(name.toLowerCase())
      ),
    [list, name]
  );
  return (
    <div>
      <List mode="card">
        {searchList.map((item) => (
          <List.Item
            key={item.cinemaId}
            description={
              <div>
                <div>{item.address}</div>
              </div>
            }
            clickable={false}
            onClick={() => navigate(`/cinema/${item.cinemaId}`)}>
            {item.name}
          </List.Item>
        ))}
      </List>
    </div>
  );
};

const Search = (props) => {
  const [name, setName] = useState('');
  useAutoHandleTabbar();

  const navigate = useNavigate();
  return (
    <div>
      <div style={{ padding: '5px' }}>
        <SearchBar
          placeholder="请输入内容"
          value={name}
          onChange={(val) => setName(val)}
          showCancelButton={() => true}
          onCancel={() => {
            navigate('/cinema');
          }}
        />
        <Divider />
      </div>

      {name && (
        <CinemaContent
          list={props.list}
          name={name}
        />
      )}
    </div>
  );
};

const MapStateToPropsParam = (state) => {
  return {
    list: state.CinemaReducer.cinemaList,
  };
};

const MapDispatchToPropsParam = {};

export default connect(MapStateToPropsParam, MapDispatchToPropsParam)(Search);
